/*
 * @Author: weidewei
 * @Date: 2025-05-15 09:34:39
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-16 11:39:36
 * @Description:
 * @FilePath: \v2\src\router\index.js
 */
import Vue from "vue";
import VueRouter from "vue-router";
import HomeDetail from "@/views/home/detail.vue";
Vue.use(VueRouter);
// 自动生成路由的核心函数
function generateRoutes() {
  const routes = [];
  /**
   * 使用 `require.context` 动态加载指定目录下的 Vue 组件文件。
   *
   * `require.context` 是 Webpack 提供的一个方法，用于在编译时创建一个上下文，
   * 允许动态地加载指定目录下的模块。该方法返回一个函数，该函数可以用于导入匹配的模块。
   *
   * @param {string} directory - 要加载的目录路径，相对于当前文件。
   * @param {boolean} useSubdirectories - 是否递归加载子目录中的文件。
   * @param {RegExp} regExp - 用于匹配文件的正则表达式。
   * @returns {function} - 返回一个函数，该函数可以用于导入匹配的模块。
   */
  const files = require.context("../views", true, /\.vue$/);

  files.keys().forEach((filePath) => {
    if (filePath.startsWith("./_")) return;
    // 2. 分割路径，判断层级
    const pathSegments = filePath.split("/");
    // 要求路径格式为: ./子文件夹/xxx.vue（共3段）
    if (pathSegments.length !== 3) return;
    const componentPath = filePath.substring(1);
    console.log(componentPath);
    let path = filePath
      .replace(/^\.\//, "")
      .replace(/\.vue$/, "")
      .replace(/_/g, ":")
      .replace(/\/index$/i, "") // 关键修复：去掉 /index
      .toLowerCase();

    routes.push({
      path: `/${path}`,
      component: () => import(`@/views${componentPath}`),
      name: path.replace(/\//g, "-"),
    });
  });

  return routes;
}
// 将手动配置的静态路由、高频路由放在动态路由之前。
const routes = [
  {
    path: "/",
    redirect: "/home", // 重定向到首页
  },
  //   {
  //     path: "/home",
  //     name: "home",
  //     component: () => import("@/views/home"),
  //   },
  {
    path: "/home/detail",
    name: "home-detail",
    beforeEnter: (to, from, next) => {
      next(); // 必须调用 next()
      console.log("beforeEnter触发了");
    },
    component: () => import("@/views/home/detail.vue"),
  },
  ...generateRoutes(),
];
// console.log("routes", routes);
const whiteList = ["/home"];
const router = new VueRouter({
  mode: "hash",
  scrollBehavior: () => ({
    y: 0,
  }),

  routes,
});

/**
 * 
 * 想象一次 太空火箭发射 的流程，将守卫阶段对应到发射步骤：

  发射前检查
  👉 beforeEach（全局前置守卫：检查权限/登录状态）
  （例：检查燃料是否充足）

  火箭舱门独检
  👉 beforeEnter（路由独享守卫：针对特定路由的检查）
  （例：检查宇航员安全带）

  宇航员自检
  👉 beforeRouteEnter（组件内守卫：组件级别的逻辑）
  （例：宇航员确认自己的设备）

  等待燃料加载
  👉 解析异步组件（加载动态导入的组件）
  （例：等待燃料加注完成）

  发射最终确认
  👉 beforeResolve（全局解析守卫：最后的数据预加载/确认）
  （例：指挥中心最终倒计时）

  点火升空
  👉 导航确认（URL 更新，组件渲染）
  （例：火箭发射！）

  发射后报告
  👉 afterEach（全局后置钩子：日志/统计）
  （例：任务完成报告）
 * 
 */

// 路由前置守卫：在所有路由跳转前触发，常用于全局权限校验（如登录验证）。
router.beforeEach((to, from, next) => {
  console.log("beforeEach路由前置守卫");
  // 2. 处理白名单逻辑
  if (whiteList.includes(to.path)) {
    next(); // 允许访问
  } else {
    if (!localStorage.getItem("token")) return alert("没登录，你跳个der页面！");
    next(); // 其他路径跳转到登录页
  }
});

router.beforeResolve((to, from, next) => {
  console.log("beforeResolve全局解析守卫");
  if (to.path === "/asyncRoute") {
    next();
  } else {
    next();
  }
});

// 路由后置守卫：在导航完成后触发，常用于日志记录或页面统计。
router.afterEach((to, from, next) => {
  console.log(to);
  console.log(from);
  console.log(next);
});

export default router;
